<template>
  <Drawer :visible="visible" :width="1000" size="large" title="查看任务详情" @close="handleCancel">
    <template #footer>
      <a-space class="float-right">
        <Button @click="handleCancel">关闭</Button>
      </a-space>
    </template>
    <Form ref="formRef" :model="form" label-width="150px">
      <Divider>基本信息</Divider>
      <Row>
        <Col :span="12">
          <FormItem label="升级任务">
            <span>{{ form.name }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="应用">
            <span>{{ form.app }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="企业名称">
            <span>{{ form.tenant }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="套餐类型">
            <span>{{ form.instance }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="组件">
            <span>{{ form.component }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="任务描述">
            <span>{{ form.description }}</span>
          </FormItem>
        </Col>
      </Row>
      <Divider>升级信息</Divider>
      <Row>
        <Col :span="12">
          <FormItem label="命名空间">
            <span>{{ form.cceNamespace }}</span>
          </FormItem>
        </Col>
        <Col>
          <FormItem label="工作负载">
            <span>{{ form.previousCceDeployment }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="升级前镜像">
            <span>{{ form.previousImage }}</span>
          </FormItem>
        </Col>
        <Col>
          <FormItem label="升级前版本">
            <span>{{ form.previousVersion }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="升级后镜像">
            <span>{{ form.currentImage }}</span>
          </FormItem>
        </Col>
        <Col>
          <FormItem label="升级后版本">
            <span>{{ form.currentVersion }}</span>
          </FormItem>
        </Col>
      </Row>
      <Divider>升级方式</Divider>
      <Row>
        <Col :span="12">
          <FormItem label="升级方式">
            <span>{{ form.type }}</span>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Table v-if="form.type === 'GRAY'" :columns="column" :dataSource="form.grayParamDtoList" :pagination="false"
           bordered>
    </Table>
  </Drawer>
</template>

<script lang="ts" setup>
import {defineProps, reactive, ref} from 'vue';
import {Button, Col, Divider, Drawer, Form, FormItem, message, Row, Table} from 'ant-design-vue';
import {viewUpgradeTasks} from '/@/api/upgrade-center/upgradeTask';
import {grayParamColumns} from '../drawer.data'
import {UpgradeTaskViewItem} from '/@/api/upgrade-center/model/upgradeTaskModel';

const formRef = ref();
let props = defineProps({
  upgradeDetail: Object,
});
let column = ref()
let propsRef = reactive(props);
const visible = ref(false)
const form = ref<Partial<UpgradeTaskViewItem>>({});

const handleCancel = function () {
  formRef.value.resetFields();
  visible.value = false
}

async function getUpgradeTasks() {
  form.value = await viewUpgradeTasks({
    taskId: propsRef.upgradeDetail!.id
  });
}

const filter = () => {
  column.value = grayParamColumns.filter((v) => {
    return v.key !== 'operation'
  })
}
const openDrawer = () => {
  getUpgradeTasks().then(() => {
    visible.value = true
  }).catch((e) => {
    message.error(e.message)
  })
}

filter()
defineExpose({openDrawer})
</script>
